<template>
  <div class="app-container">
    <div>
      <el-row>
        <el-col :span="4">
          <strong style="font-size: 20px;">
            提成设置
          </strong>
        </el-col>
        <el-col :span="20" align="right">
          <span style="margin-right: .5em">
            <el-select
              v-model="category"
              style="width: 150px;"
              placeholder="分类"
              filterable
              clearable
              @change="getSpecifications()"
            >
              <el-option
                v-for="item in categories"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </span>
          <span v-if="profitRules != '' && profitRules.length > 0" style="margin-right: .5em">
            <el-select
              v-model="profitRule"
              style="width: 150px;"
              placeholder="特殊方案"
              filterable
              clearable
              @change="changeProfitRule()"
            >
              <el-option
                v-for="item in profitRules"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </span>
        </el-col>
      </el-row>
      <div style="width: 100%;padding-top: 10px;">
        <el-table
          :key="refreshTable"
          v-loading="loading"
          :data="list"
          element-loading-text="加载中..."
          height="80vh"
          fit
          lazy
          stripe
          highlight-current-row
          border
          style="width: 100%"
          :header-cell-style="{'text-align':'center'}"
        >
          <el-table-column fixed prop="productName" label="商品名称" width="150" />
          <el-table-column fixed label="销售时间" width="150">
            <template slot-scope="scope">
              <span v-if="scope.row.startSaleTime != 0">{{ scope.row.startSaleTime + '-' + scope.row.endSaleTime }}</span>
              <span v-else>全时间段</span>
            </template>
          </el-table-column>
          <el-table-column fixed prop="categoryName" label="分类" :width="width" />
          <el-table-column fixed prop="price" label="售价(元)" :width="width" />
          <el-table-column label="销售员">
            <el-table-column label="工资（元）" :width="width">
              <template slot-scope="scope">
                <div>{{ scope.row[10].value }}</div>
                <div>
                  <span v-if="scope.row[10].value>0" class="percent-color">{{ scope.row[10].percent }}</span>
                  <span v-else>{{ scope.row[10].percent }}</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="补贴（元）" :width="width">
              <template slot-scope="scope">
                <div>{{ scope.row[9].value }}</div>
                <div>
                  <span v-if="scope.row[9].value>0" class="percent-color">{{ scope.row[9].percent }}</span>
                  <span v-else>{{ scope.row[9].percent }}</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="提成（元）" :width="width">
              <template slot-scope="scope">
                <div>{{ scope.row[8].value }}</div>
                <div>
                  <span v-if="scope.row[8].value>0" class="percent-color">{{ scope.row[8].percent }}</span>
                  <span v-else>{{ scope.row[8].percent }}</span>
                </div>
              </template>
            </el-table-column>
          </el-table-column>
          <el-table-column label="队长">
            <el-table-column label="佣金（元）" :width="width">
              <template slot-scope="scope">
                <div>{{ scope.row[6].value }}</div>
                <div>
                  <span v-if="scope.row[6].value>0" class="percent-color">{{ scope.row[6].percent }}</span>
                  <span v-else>{{ scope.row[6].percent }}</span>
                </div>
              </template>
            </el-table-column>
          </el-table-column>
          <el-table-column label="经纪人">
            <el-table-column label="佣金（元）" :width="width">
              <template slot-scope="scope">
                <div>{{ scope.row[7].value }}</div>
                <div>
                  <span v-if="scope.row[7].value>0" class="percent-color">{{ scope.row[7].percent }}</span>
                  <span v-else>{{ scope.row[7].percent }}</span>
                </div>
              </template>
            </el-table-column>
          </el-table-column>
          <el-table-column label="资源公司">
            <el-table-column label="分成（元）" :width="width">
              <template slot-scope="scope">
                <div>{{ scope.row[5].value }}</div>
                <div>
                  <span v-if="scope.row[5].value>0" class="percent-color">{{ scope.row[5].percent }}</span>
                  <span v-else>{{ scope.row[5].percent }}</span>
                </div>
              </template>
            </el-table-column>
          </el-table-column>
          <el-table-column label="农邻居平台">
            <el-table-column label="分成（元）" :width="width">
              <template slot-scope="scope">
                <div>{{ scope.row[2].value }}</div>
                <div>
                  <span v-if="scope.row[2].value>0" class="percent-color">{{ scope.row[2].percent }}</span>
                  <span v-else>{{ scope.row[2].percent }}</span>
                </div>
              </template>
            </el-table-column>
          </el-table-column>
          <el-table-column label="酒代理商">
            <el-table-column label="分成（元）" :width="width">
              <template slot-scope="scope">
                <div>{{ scope.row[0].value }}</div>
                <div>
                  <span v-if="scope.row[0].value>0" class="percent-color">{{ scope.row[0].percent }}</span>
                  <span v-else>{{ scope.row[0].percent }}</span>
                </div>
              </template>
            </el-table-column>
          </el-table-column>
          <el-table-column label="场所负责人">
            <el-table-column label="分成（元）" :width="width">
              <template slot-scope="scope">
                <div>{{ scope.row[3].value }}</div>
                <div>
                  <span v-if="scope.row[3].value>0" class="percent-color">{{ scope.row[3].percent }}</span>
                  <span v-else>{{ scope.row[3].percent }}</span>
                </div>
              </template>
            </el-table-column>
          </el-table-column>
          <el-table-column label="场所分成">
            <el-table-column label="分成（元）" :width="width">
              <template slot-scope="scope">
                <div>{{ scope.row[4].value }}</div>
                <div>
                  <span v-if="scope.row[4].value>0" class="percent-color">{{ scope.row[4].percent }}</span>
                  <span v-else>{{ scope.row[4].percent }}</span>
                </div>
              </template>
            </el-table-column>
          </el-table-column>
          <el-table-column label="场所管理员">
            <el-table-column label="分成（元）" :width="width">
              <template slot-scope="scope">
                <div>{{ scope.row[1].value }}</div>
                <div>
                  <span v-if="scope.row[1].value>0" class="percent-color">{{ scope.row[1].percent }}</span>
                  <span v-else>{{ scope.row[1].percent }}</span>
                </div>
              </template>
            </el-table-column>
          </el-table-column>
          <el-table-column label="订台">
            <el-table-column label="分成（元）" :width="width">
              <template slot-scope="scope">
                <div>{{ scope.row[11].value }}</div>
                <div>
                  <span v-if="scope.row[11].value>0" class="percent-color">{{ scope.row[11].percent }}</span>
                  <span v-else>{{ scope.row[11].percent }}</span>
                </div>
              </template>
            </el-table-column>
          </el-table-column>
          <el-table-column label="股务员">
            <el-table-column label="分成（元）" :width="width">
              <template slot-scope="scope">
                <div>{{ scope.row[12].value }}</div>
                <div>
                  <span v-if="scope.row[12].value>0" class="percent-color">{{ scope.row[12].percent }}</span>
                  <span v-else>{{ scope.row[12].percent }}</span>
                </div>
              </template>
            </el-table-column>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loading: false,
      list: [],
      refreshTable: 0,
      types: {
        0: '酒代理商',
        1: '场所管理员',
        2: '夜乐公司',
        3: '场所负责人',
        4: '场所分成',
        5: '资源公司',
        6: '队长',
        7: '经纪人',
        8: '提成',
        9: '补贴',
        10: '工资',
        11: '订台',
        12: '股务员'
      },
      width: 120,
      store: 0,
      categories: [],
      category: '',
      profitRules: [],
      profitRule: ''
    }
  },
  created() {
    const store = localStorage.getItem('storeId')

    if (store > 0) {
      this.store = store
      this.getCategories()
      this.getSpecifications()
      // this.getProfitRule()
    } else {
      this.$message.error('无效storeId，请退出重试')
    }
  },
  methods: {
    // 选择提成方案时候，替换成提成方案的设置
    changeProfitRule() {
      console.log(this.profitRule)
      this.getSpecifications()
    },
    // 获取后台方案
    getProfitRule() {
      this.profitRules = []
      if (this.store > 0) {
        this.axios.get(`/store/${this.store}/profit-rules`, {
          params: {
            limit: 10000000
          }
        }).then((res) => {
          this.profitRules = res.data
        })
      }
    },
    // 根据门店出来对应的类型
    getCategories() {
      this.categories = []
      if (this.store > 0) {
        this.axios.get(`/store/${this.store}/categories`, {
          params: {
            limit: 10000000
          }
        }).then((res) => {
          this.categories = res.data
        })
      }
    },
    getSpecifications() {
      this.list = []
      this.loading = true
      let filter = `entity.getProduct().getIsOnSale() == true`
      if (this.category) {
        filter += ` && entity.getProduct().getCategory().getId() == ${this.category}`
      }
      this.axios.get(`/store/${this.store}/specifications`, {
        params: {
          '@filter': filter,
          '@expands': `['entity.product','entity.profitSettings']`,
          limit: 10000000
        }
      }).then(res => {
        if (res.data.length > 0) {
          const list = []
          for (var item of res.data) {
            const listItem = {}
            listItem['startSaleTime'] = item.product.__metadata.startSaleTime
            listItem['productName'] = item.product.__metadata.name
            listItem['categoryName'] = item.product.__metadata.category.__toString
            listItem['price'] = item.price
            listItem['endSaleTime'] = item.product.__metadata.endSaleTime

            // 获取specification所有profitSettings
            const profitSettings = item.profitSettings
            // 先初始化方案，全部加，加完下面查，有的替换，无的，就默认0
            for (let i = 0; i < 13; i++) {
              listItem[i] = {
                id: null,
                type: i,
                specification: item.id,
                value: 0,
                percent: '0.00%'
              }
              if (parseInt(this.profitRule) > 0) {
                listItem[i]['rule'] = this.profitRule
                const setting = profitSettings.find(v => v.__metadata.type === i && v.__metadata.rule && v.__metadata.rule.id === this.profitRule)
                if (setting) {
                  listItem[i]['id'] = setting.id
                  listItem[i]['value'] = setting.__metadata.value
                }
              } else {
                const setting = profitSettings.find(v => v.__metadata.type === i && !v.__metadata.rule)
                if (setting) {
                  listItem[i]['id'] = setting.id
                  listItem[i]['value'] = setting.__metadata.value
                }
              }
              listItem[i]['percent'] = (Number(listItem[i]['value']) / Number(listItem['price']) * 100).toFixed(2) + '%'
            }
            list.push(listItem)
          }
          this.list = list
          console.log('list', this.list)
        }
      }).finally(() => { this.loading = false })
    }
  }
}
</script>

<style lang="scss" scoped>
.percent-color {
  color: red;
}
</style>
